CSS - Flexbox (Trillo Project)

Posted on

Today’s notes is for the Section 7, Lecture 72-88 of this udemy course.

Trillo Project

The project is a assignment / course content for the Udemy course. It fully implements the flexbox layout into everywhere of this webpage, meanwhile introduces some modern and cool CSS effects. The notes taken will focus more on the tricks used while building the project.

Screenshots

Use SVG library

Use SVG other than img can be benefitial in a lot of ways, it’s a more safe way to have image showing independentally from the network access, the file has to be load is much lighter, the icon / shape itself can be much more flexibly styled.

First, select the icons from icomoon website, or upload your artworks. Then choose download SVG to get the zip file.

Screenshots

Then get the symbol-defs.svg file in the folder, which can be used as the library contains all the icons downloaded. In the code directly use:

1
2
3
<svg>
    <use xlink:href="img/symbol-defs.svg#icon-magnifying-glass"></use>
</svg>

The name(like icon-magnifying-glass) for each icon you selected can be looked up in the demo html file included in the folder as well.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<header class="header">
    <img src="img/logo.png" alt="Trillo Logo" class="logo">
    <form action="#" class="search">
        <input type="text" class="search__input" placeholder="Search hotels">
        <button class="search__button">
            <svg class="search__icon">
                <use xlink:href="img/sprite.svg#icon-magnifying-glass"></use>
            </svg>
        </button>
    </form>
    <nav class="user-nav">
        <div class="user-nav__icon-box">
            <svg class="user-nav__icon">
                <use xlink:href="img/sprite.svg#icon-bookmark"></use>
            </svg>
            <span class="user-nav__notification">7</span>
        </div>
        <div class="user-nav__icon-box">
            <svg class="user-nav__icon">
                <use xlink:href="img/sprite.svg#icon-chat"></use>
            </svg>
            <span class="user-nav__notification">13</span>
        </div>
        <div class="user-nav__user">
            <img src="img/user.jpg" alt="User photo" class="user-nav__user-photo">
            <span class="user-nav__user-name">Yutong</span>
        </div>
    </nav>
</header>

  1. Use flex box to place the three different parts.

    1
    2
    3
    4
    5
    6
    7
    .header {
        ...
        display: flex;
        justify-content: space-between;
        align-items: center;
        ...
    }

  2. Assign a fixed percentage to the search bar, the other parts will figure themselves out.

    1
    2
    3
    4
    5
    .search {
        ...
        flex: 0 0 40%; // no grow when space available, no shrink when space not enough, use 40% of the width (because flex-direction is set to 'row')
        ...
    }

  3. Can even use flexbox just for vertically and horizontally center align items.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .user-nav {
        ...
        &__notification {
            ...
            display: flex;
            justify-content: center;
            align-items: center;
        }
        ...
    }

  4. Use align-self to specify the starting point for alignment for the element.

    1
    2
    3
    4
    .user-nav {
        align-self: stretch; // take the whole space on the y axis (the cross axis)
        ...
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
<nav class="sidebar">
    <ul class="side-nav">
        <li class="side-nav__item side-nav__item--active">
            <a href="#" class="side-nav__link">
                <svg class="side-nav__icon">
                    <use xlink:href="img/sprite.svg#icon-home"></use>
                </svg>
                <span>Hotel</span>
            </a>
        </li>
    </ul>
    ...
</nav>

Of course the sidebar also use flexbox to align links and icons, more want to highlight the animation for hovering here. The logic behind is to have the ::before class for the icon, when hover, change the Y axis first, then the width.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.side-nav {
    ...
    &__item::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 3px;
        background-color: var(--color-primary);
        transform: scaleY(0); // have to specify it here to mark the normal state for animation to work.
        transition: transform .2s, 
                    width .4s cubic-bezier(1,0,0,1) .2s,
                    background-color .1s;
    }
    &__item:hover::before,
    &__item--active::before {
        transform: scaleY(1);
        width: 100%;
    }
    ...
}

Overview

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="overview">
    <h1 class="overview__heading">
        ...
    </h1>
    <div class="overview__stars">
        ...
    </div>
    <div class="overview__location">
        ...
    </div>
    <div class="overview__rating">
        ...
    </div>
</div>

Other than specify the percentage of the element to control the layout, sometimes can simply use margin: auto to place the empty space somewhere to layout the elments neatly.

1
2
3
4
5
6
7
8
.overview {
    display: flex;
    align-items: center;
    ...
    &__stars {
        margin-right: auto; // all the empty space will be taken on the right side of this section
    }
}

Details

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<div class="detail">
    <div class="description">
        ...
        <ul class="list">
            <li class="list__item">Close to the beach</li>
            <li class="list__item">Breakfast included</li>
            <li class="list__item">Free airport shuttle</li>
            <li class="list__item">Free wifi in all rooms</li>
            <li class="list__item">Air conditioning and heating</li>
            <li class="list__item">Pets allowed</li>
            <li class="list__item">We speak all languages</li>
            <li class="list__item">Perfect for families</li>
        </ul>
        <div class="recommend">
            ...
            <div class="recommend__friends">
                <img src="img/user-3.jpg" alt="Friend 1" class="recommend__photo">
                <img src="img/user-4.jpg" alt="Friend 2" class="recommend__photo">
                <img src="img/user-5.jpg" alt="Friend 3" class="recommend__photo">
                <img src="img/user-6.jpg" alt="Friend 4" class="recommend__photo">
            </div>
        </div>
    </div>
    
    <div class="user-reviews">
        <figure class="review">
            ...
        </figure>
        ...
        <button class="btn-inline">Show all <span>&rarr;</span></button>
    </div>
</div>

  1. Place the elements into two columns like table.
    Let each element take 50% of the width, then specify the flex-wrap to wrap the content.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .list {
        ...
        display: flex;
        flex-wrap: wrap;

        &__item {
            flex: 0 0 50%;
            ...
        }
    }

  2. Change the color of SVG
    The logic is use it as a background mask of the color.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    .list {
        &__item::before {
            ...

            //older browsers (without color change)
            background-image: url(../img/chevron-thin-right.svg);
            background-size: cover;

            @supports (-webkit-mask-image: url()) or (mask-image: url()) {
                //newer browsers
                background-color: var(--color-primary); // the background color
                -webkit-mask-image: url(../img/chevron-thin-right.svg);
                -webkit-mask-size: cover;
                mask-image: url(../img/chevron-thin-right.svg);
                mask-size: cover;
                background-image: none;
            }
        }
    }

  3. Place images on top of one another
    Have a border for each image, then margin each image using a negative value.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    .recommend {
        ...
        &__photo {
            box-sizing: content-box;
            height: 4rem;
            width: 4rem;
            border-radius: 50%;
            border: 3px solid #fff;

            &:not(:last-child) {
                margin-right: -2rem;
            }
        }
        ...
    }

  4. Place a quote symbol on the left top of the div
    The point here is to use entity other than the actual ‘ “ ‘ as the content for the ::before class. Can look up the entity code here.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    .review {
        ...
        &::before {
            content: "\201C";
            position: absolute;
            left: -1rem;
            top: -2.75rem;
            font-size: 20rem;
            color: var(--color-grey-light-2);
            font-family: sans-serif;
            line-height: 1;
            z-index: 1;
        }
    }

CTA

1
2
3
4
5
6
7
8
9
<div class="cta">
    <h2 class="cta__book-now">
        Good news! We have 4 free rooms for your selected dates!
    </h2>
    <button class="btn">
        <span class="btn__visible">Book now</span>
        <span class="btn__invisible">Only 4 rooms left</span>
    </button>
</div>

The button is the most fun here. Have both text ready to use, then change the Y axis position to replace one another with animation effect, use overflow to hide the other text outside of the button.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
.btn {
    font-size: 1.5rem;
    font-weight: 300;
    text-transform: uppercase;
    border-radius: 100px;
    border: none;
    background-image: linear-gradient(to right, var(--color-primary-light), var(--color-primary-dark));
    color: #fff;
    position: relative;
    overflow: hidden;
    cursor: pointer;

    & > * {
        display: inline-block; // to be able to be assigned value for width and height
        height: 100%;
        width: 100%;
        transition: all .2s;
    }

    &__visible {
        padding: 2rem 7.5rem;
    }

    &__invisible {
        position: absolute;
        padding: 2rem 0;
        
        left: 0;
        top: -100%;
        transition: all .2s;
    }

    &:hover {
        background-image: linear-gradient(to left, var(--color-primary-light), var(--color-primary-dark)); // reverse the color gradient
    }

    &:hover &__visible {
        transform: translateY(100%);
    } 

    &:hover &__invisible {
        top: 0;
    }

    &:focus {
        outline: none;
        animation: pulsate 1s infinite;
    }
}